<template>
	<view>
		<view style="font-size: 16px;display: flex;text-align: center;gap: 20px;padding: 10px;">
			<view style="background-color: gray;flex: 1;line-height: 40px;font-weight: bold;display: flex;padding: 5px;"
				@click="changeActive('预约中')" :class="{ 'is-active': selectedActive === '预约中' }">
				<image src="../../static/icons/预约中.png" style="width:  35px;margin-left: 10px;" mode="widthFix"></image>
				<view style="margin-left: 10px;">正在预约:{{ongoingNum}}</view>
			</view>
			<view style="background-color: gray;flex: 1;line-height: 40px;font-weight: bold;display: flex;padding: 5px;"
				@click="changeActive('预约成功')" :class="{ 'is-active': selectedActive === '预约成功' }">
				<image src="../../static/icons/预约成功.png" style="width:  35px;margin-left: 10px;" mode="widthFix">
				</image>
				<view style="margin-left: 10px;">预约完成:{{successNum}}</view>
			</view>
		</view>
		<view v-show="selectedActive === '预约中'" style="margin-top: 20px;padding: 5px;padding-left: 20px;" class="box"
			v-for="item in ongoingData">
			<view style="display: flex;" @click="goReservationDetail(item.id,item.doctorId)">
				<view>
					<image :src="item.doctorAvatar" @click.native.stop="goDoctoerDetail(item.doctorId)"
						style="width: 60px;height: 60px;margin-left: 2px;border-radius: 50%;">
				</view>
				<view style="flex: 2;margin-left: 10px;">
					<view style="display: flex;gap: 10px;margin-left: 10px;font-size: 14px;">
						<view style="font-size: 18px;font-weight: bold;">{{item.doctorName }}</view>
						<view style="margin-top: 3px;">{{item.staff}}</view>
						<view style="margin-top: 3px;">{{item.officeName}}</view>
					</view>
					<view
						style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 4px;">
						<view>{{item.hospitalName}}</view>
						<view class="square-box">{{item.level}}</view>
					</view>
					<view
						style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 2px;">
						<view>接诊率 <strong style="color: orange;margin-left: 10px;">99%</strong></view>
						<view>问诊疗 <strong style="color: orange;margin-left: 10px;">{{item.count}}</strong></view>
					</view>
				</view>
				<view style="flex: 1;">
					<button size="mini" type="primary" @click.native.stop="chat(item.doctorId)"
						style="font-size: 14px;line-height: 20px;width: 58px;padding: 10px;margin-left: 25px;">医前咨询</button>
				</view>
			</view>
			<view class="square-box"
				style="background-color:#E1E1E1;border: 1px solid #E1E1E1;margin-top: 2px;width: 100%;padding: 2px;display: flex;">
				<image src="../../static/icons/预约中.png" style="width: 40rpx;margin-top: 5px;margin-left: 4px;"
					mode="widthFix"></image>
				<view style="color: #FF8040;font-size: 15px;margin-top: 4px;margin-left: 4px;">
					预约时间：{{item.appointmentDate}}
				</view>
			</view>
		</view>
		<view v-show="selectedActive === '预约成功'" style="margin-top: 20px;padding: 5px;padding-left: 20px;" class="box"
			v-for="item in successData">
			<view style="display: flex;" @click="goReservationDetail(item.id,item.doctorId)">
				<view>
					<image :src="item.doctorAvatar" @click="goDoctoerDetail(item.doctorId)"
						style="width: 60px;height: 60px;margin-left: 2px;border-radius: 50%;">
				</view>
				<view style="flex: 2;margin-left: 10px;">
					<view style="display: flex;gap: 10px;margin-left: 10px;font-size: 14px;">
						<view style="font-size: 18px;font-weight: bold;">{{item.doctorName }}</view>
						<view style="margin-top: 3px;">{{item.staff}}</view>
						<view style="margin-top: 3px;">{{item.officeName}}</view>
					</view>
					<view
						style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 4px;">
						<view>{{item.hospitalName}}</view>
						<view class="square-box">{{item.level}}</view>
					</view>
					<view
						style="display: flex;gap: 10px;margin-left: 10px;font-size: 13px;color: gray;margin-top: 2px;">
						<view>接诊率 <strong style="color: orange;margin-left: 10px;">99%</strong></view>
						<view>问诊疗 <strong style="color: orange;margin-left: 10px;">{{item.count}}</strong></view>
					</view>
				</view>
				<view style="flex: 1;">
					<button size="mini" type="primary" @click.native.stop="chat(item.doctorId)"
						style="font-size: 14px;line-height: 20px;width: 58px;padding: 10px;margin-left: 25px;">医前咨询</button>
				</view>
			</view>
			<view class="square-box"
				style="background-color:#E1E1E1;border: 1px solid #E1E1E1;margin-top: 2px;width: 100%;padding: 2px;display: flex;">
				<image src="../../static/icons/预约中.png" style="width: 40rpx;margin-top: 5px;margin-left: 4px;"
					mode="widthFix"></image>
				<view style="color: #FF8040;font-size: 15px;margin-top: 4px;margin-left: 4px;">
					预约时间：{{item.appointmentDate}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				successData: {},
				ongoingData: {},
				successNum: 0,
				ongoingNum: 0,
				selectedActive: '预约中',
				labels: [{
						id: 1,
						name: '多系统萎缩'
					},
					{
						id: 2,
						name: '帕金森病'
					},
					{
						id: 3,
						name: '阿尔茨海默病'
					},
					{
						id: 4,
						name: '脑卒中'
					},
				],
			}
		},
		onShow() {
			this.load()
		},
		methods: {
			goDoctoerDetail(doctorId) {
				uni.navigateTo({
					url: '/pages/doctorDetail/doctorDetail?doctorId=' + doctorId
				})
			},
			chat(chatId) {
				// 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
				this.$request.post('/chatRole/add', {
					chatUserId: chatId,
					userId: this.user.id
				}).then(res => {
					if (res.code === '200') {
						// 获取返回的 mapData
						const resultMap = res.data; // resultMap 应该包含 chatRoleId1 和 chatRoleId2
						// 从 resultMap 中提取 ID
						const chatRoleId1 = resultMap.chatRoleId1;
						const chatRoleId2 = resultMap.chatRoleId2;
						// 使用提取的 ID 发送第二个请求
						this.$request.post('/chatGroup/add', {
							chatUserId: chatRoleId1,
							userId: chatRoleId2
						}).then(res => {
							if (res.code === '200') {
								// 请求成功，跳转到聊天页面
								this.$router.push({
									path: '/pages/chatDetail/chatDetail',
									query: {
										activeChatUserId: chatId,
										activeRole: 'DOCTOR'
									}
								});
							} else {
								// 显示错误信息
								this.$message.error(res.msg);
							}
						});
					} else {
						// 显示错误信息
						this.$message.error(res.msg);
					}
				});
			},
			load() {
				this.$request.get('/reservation/selectAll').then(res => {
					if (res.code === '200') {
						let reservationData = res.data;
						// 初始化计数器
						this.successNum = 0;
						this.ongoingNum = 0;
						// 清空之前的数据
						this.successData = [];
						this.ongoingData = [];

						reservationData.forEach(item => {
							if (item.status === "预约成功") {
								this.successNum++;
								this.successData.push(item); // 将状态为“预约成功”的项添加到数组中
							} else {
								this.ongoingNum++;
								this.ongoingData.push(item); // 将状态为“预约中”的项添加到数组中
							}
						});
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			changeActive(item) {
				this.selectedActive = item
			},
			goReservationDetail(reservationId, doctorId) {
				uni.navigateTo({
					url: `/pages/ReservationDetail/ReservationDetail?reservationId=${reservationId}&doctorId=${doctorId}`
				})
			},

		}
	}
</script>

<style>
	.is-active {
		background-color: #FF5000;
		/* 选中状态的背景颜色示例 */
		color: orange;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>